<template>
  <view class="page">
	  <uni-nav-bar background-color="#00a9ff" title="注册" color="white" :fixed="true"
	    statusBar="true" left-icon="left" @clickLeft="back"/>
    <image src="../../static/logo.png" class="mainlogo"></image>
	
    <form class="register-form">
	<view class="input-item">
    <input type="text" v-model="nickname" placeholder="请输入昵称">
	</view>
    <view class="input-item">
    <input type="text" v-model="userid" placeholder="请输入用户id">
    </view>
    <view class="input-item">
    <input type="password" v-model="password" placeholder="请输入密码">
    </view>
    <view class="input-item">
    <input type="password" v-model="confirmPassword" placeholder="请确认密码">
    </view>      
    <button type="button" class="btn" @click="register">注册</button>
    </form>
    <button class="back-btn" @click="goBack">返回</button>
</view>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      userid: '',
      password: '',
      confirmPassword: '',
      nickname: ''
    };
  },
  methods: {
    async register() {
      if(!this.userid || !this.password || !this.nickname) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      if(this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入密码不一致',
          icon: 'none'
        });
        return;
      }
      try {
        const response = await axios.post('/api/users/register', {
          userid: this.userid,
          password: this.password,
          nickname: this.nickname
        });
        const responseData = response.data;
        if(responseData.code === 200) {
          uni.showToast({
            title: responseData.message,
            icon: 'success'
          });
          uni.navigateTo({
            url: '/pages/login/login'
          });
        } else {
          uni.showToast({
            title: responseData.message,
            icon: 'none'
          });
        }
      } catch (error) {
        let errorMessage = '注册失败，请稍后再试';
        if(error.response) {
          if(error.response.status === 500) {
            errorMessage = error.response.data.message;
          }
        }
        uni.showToast({
          title: errorMessage,
          icon: 'none'
        });
      }
    },
    Back() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.mainlogo{
	width: 200rpx;
	height: 200rpx;
	display: flex;	
	margin:60rpx auto;
	border-radius: 100%;
}

.register-form {
  width: 80%;
  border-radius: 10px;
  background-color: #fff;
  border-radius: 5rpx;
}

.input-item {
  margin: 10rpx 0;
  width: 90%;
  height: 50rpx;
  padding: 10rpx;
  font-size: 16rpx;
  outline: none;
  border: none;
  border-bottom: 1rpx solid #ddd;
}

.input {
  width: 90%;
  height: 50rpx;
  padding: 10rpx;
  font-size: 16rpx;
  outline: none;
  border: none;
}
.btn{
	margin-top:150rpx;
}
.back-btn {
  margin-top: 20rpx;
  color: #007aff;
  border-radius: 7px;
  width: 70%;
  height: 80rpx;
}


</style>